<template>
  <div class="grid-container">
    <!-- 左上角：地图 -->
    <div class="grid-item map-container">
      <!-- <MapContainer :x="vehicleInfo.coordinateX" :y="vehicleInfo.coordinateY" /> -->

      <div v-if="temgpsInfo.latitudeY && temgpsInfo.latitudeX" id="container"></div>
  <div v-else class="map-placeholder">等待获取地理坐标信息...</div>
    </div>

    <!-- 右上角：设备信息 -->
    <div class="grid-item info-container">
      <el-card>
        <h3>制冷机设备信息</h3>
        <div class="info-cards">
          <el-card class="info-card">
            <div class="card-title">设定温度范围</div>
            <div v-if="temgpsInfo.lgColdType" class="card-value"> {{ temgpsInfo.lgColdType.minTemp }} ℃ - {{ temgpsInfo.lgColdType.maxTemp }} ℃</div>
            <div v-else>未绑定车辆类型 无法获取温度</div>
          </el-card>
          <el-card class="info-card">
            <div class="card-title">设定湿度范围</div>
            <!-- <div class="card-value"> {{ temgpsInfo.lgColdType.minHumidity }} % - {{ temgpsInfo.lgColdType.maxHumidity }}%</div> -->

              <div v-if="temgpsInfo.lgColdType" class="card-value"> {{ temgpsInfo.lgColdType.minHumidity }} % - {{ temgpsInfo.lgColdType.maxHumidity }} %</div>
              <div v-else>未绑定车辆类型 无法获取温度</div>
          </el-card>
          <el-card class="info-card">
            <div class="card-title">当前温度</div>
            <div class="card-value">{{ temgpsInfo.currentTemperature }}℃</div>
          </el-card>
          <el-card class="info-card">
            <div class="card-title">当前湿度</div>
            <div class="card-value">{{ temgpsInfo.currentHumidity }}%</div>
          </el-card>
          <el-card class="info-card">
            <div class="card-title">绑定车辆</div>
            <div class="card-value">
              <div v-if="temgpsInfo.lgVehicle !== null && temgpsInfo.lgVehicle.vehicleType !== null">
                {{ temgpsInfo.lgVehicle.vehicleId }}
              </div>
              <div v-else>
                未绑定
              </div>
            </div>
          </el-card>
          <el-card class="info-card">
            <div class="card-title">车辆类型</div>
            <div v-if="temgpsInfo.lgVehicle !== null && temgpsInfo.lgVehicle.vehicleType !== null">
              {{ temgpsInfo.lgVehicle.vehicleType }}
            </div>
            <div v-else>
              未绑定
            </div>
          </el-card>
        </div>
      </el-card>
    </div>

    <!-- 左下角：历史曲线 -->
    <div class="grid-item chart-container">
      <el-card style="height: 100%;">
        <h3>历史温湿度曲线</h3>
        <!-- 这里可以放入你的图表组件 -->
        <div class="chart-placeholder">图表组件</div>
      </el-card>
    </div>

    <!-- 右下角：报警信息 -->
    <div class="grid-item alarm-container">
      <el-card>
        <h3>报警信息列表</h3>
        <el-table :data="alarmData" style="width: 100%">
          <el-table-column prop="time" label="时间" width="180"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getTemperature,getTemList } from "@/api/equipment/temperature";
import * as echarts from 'echarts';
import MapContainer from "./MapContainer.vue";

import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: "App",
  components: {
    MapContainer
  },
  data() {
    return {
      alarmData: [
        {
          time: "2023-10-01 10:00",
          type: "温度过高",
          description: "温度超过设定上限"
        },
        {
          time: "2023-10-01 09:30",
          type: "湿度过低",
          description: "湿度低于设定下限"
        }
      ],
      chartData: {
        // temperature: [-14.5, -20.0, -15.8, -13, -16.9, -18.1, -19.7],
        // humidity: [55, 54, 56, 53, 55, 54, 56],
        // time: ['2024.04.01 09:00:11', '2024.04.02 09:00:11', '2024.04.03 09:00:11', '2024.04.01 09:00:11', '2024.04.01 09:00:11', '14:00', '15:00']
      },
      temgpsInfo: {},
      // vehicleInfo: null,
      map: null //初始化 map 对象
    };
  },
  created() {
    this.getTemperature();
    this.getTemList();
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        const chartDom = document.querySelector('.chart-placeholder');
        if (chartDom) {
          const myChart = echarts.init(chartDom);
          const option = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['温度', '湿度']
            },
            xAxis: {
              type: 'category',
              data: this.chartData.time
            },
            yAxis: [
              {
                type: 'value',
                name: '温度(℃)',
                min: -20,
                max: 50
              },
              {
                type: 'value',
                name: '湿度(%)',
                min: 20,
                max: 80
              }
            ],
            series: [
              {
                name: '温度',
                type: 'line',
                data: this.chartData.temperature,
                yAxisIndex: 0
              },
              {
                name: '湿度',
                type: 'line',
                data: this.chartData.humidity,
                yAxisIndex: 1
              }
            ]
          };
          myChart.setOption(option);
        } else {
          console.error('无法找到图表容器元素');
        }
      });
    },
    getTemperature() {
      const machineId = this.$route.params.id;
      getTemperature(machineId).then((res) => {
        this.temgpsInfo = res.data;
        // this.vehicleInfo = res.data.lgVehicle || null; // 取消注释并添加默认值
        console.log("getTemperature",res);
        this.initMap();
      });
    },
    getTemList() {
      const TemId = this.$route.params.id;
      getTemList(TemId).then((res) => {
        this.chartData = res.data;
        console.log("getTemList",res);
        this.initChart();
      });
    },
    initMap() {
      if (!this.temgpsInfo.latitudeY || !this.temgpsInfo.latitudeX) {
    console.warn('缺少地理坐标信息，无法初始化地图')
    return
  }
      const markerContent = `<div class="custom-content-marker"><img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png"></div>`
      AMapLoader.load({
        key: "e6e91e6068cdc02a76dafe65021dd1a1", //此处填入我们注册账号后获取的Key
        version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        const position = new AMap.LngLat(this.temgpsInfo.latitudeY, this.temgpsInfo.latitudeX); //Marker 经纬度
        this.map = new AMap.Map("container", { //设置地图容器id
          mapStyle: "amap://styles/normal",
          viewMode: "2D", //是否为3D地图模式
          zoom: 20, //初始化地图级别
          center: [this.temgpsInfo.latitudeY, this.temgpsInfo.latitudeX], //初始化地图中心点位置
        });

        const marker = new AMap.Marker({
          position: position,
          content: markerContent, //将 html 传给 content
          offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
        });
        this.map.add(marker);
      }).catch(e => {
        console.log(e);
      })
    },
  },
};
</script>

<style scoped>
.chart-placeholder {
  height: 300px;
  width: 100%;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  /* 减小间隙 */
  height: calc(100vh - 60px);
  /* 减去顶部导航栏高度 */
}

.grid-item {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* 防止内容溢出 */
}

.info-cards {
  display: flex;
  gap: 10px;
  /* 减小间隙 */
  padding: 10px;
  flex-wrap: wrap;
}

.info-card {
  flex: 1 1 120px;
  /* 减小卡片宽度 */
  text-align: center;
  padding: 15px;
  /* 减小内边距 */
}

.chart-placeholder {
  height: 250px;
  /* 减小高度 */
}

.alarm-container {
  height: 100%;
}

.alarm-container .el-table {
  height: calc(100% - 60px);
  /* 表格高度自适应 */
  font-size: 12px;
  /* 减小字体大小 */
}

.alarm-container .el-table th {
  padding: 8px 0;
  /* 减小表头内边距 */
}

.alarm-container .el-table td {
  padding: 6px 0;
  /* 减小单元格内边距 */
}

.map-container {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.info-container {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.chart-container {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.alarm-container {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.chart-placeholder {
  height: 300px;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.info-cards {
  display: flex;
  gap: 20px;
  padding: 10px;
  flex-wrap: wrap;
  /* 新增：允许换行 */
}

.info-card {
  flex: 1 1 200px;
  /* 修改：设置最小宽度 */
  text-align: center;
  padding: 20px;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.card-value {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.info-column {
  text-align: left;
  font-size: 14px;
  line-height: 1.8;
  color: #606266;
}

.info-column div {
  padding: 4px 0;
}

.info-row {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #606266;
}

.info-row div {
  white-space: nowrap;
}

#container {
  width: 100%;
  height: 430px;
}

.custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}

.custom-content-marker img {
  width: 100%;
  height: 100%;
}

.custom-content-marker .close-btn {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
}

.custom-content-marker .close-btn:hover {
  background: #666;
}
</style>
